<template>
  <div class="pingxingzuobiao">
    <div ref="chart" class="thechart"></div>
  </div>
</template>
<script>
import axios from "axios";
import randomcolor from "randomcolor";
import Color from "color";
let clipboardjs = require("clipboard");

const libDP = require("../lib/Douglas-Peucker");
import * as echarts from "echarts";
export default {
  name: "HangxianJuli",
  data() {
    return {};
  },
  async mounted() {
    let vue = this;
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele, "", {
      renderer: "canvas"
    });
    let grid_sssssize = 1280;
    let gridPosition = {
      left: 30,
      right: 80,
      bottom: 80,
      // top: 30,
      // width: grid_sssssize,
      // height: grid_sssssize
    };
    let theSeries = await this.getSerieses();
    // debugger
    chart.setOption({
      backgroundColor: "transparent" || "white",
      color: ["#c23531", "#91c7ae", "#dd8668"],
      tooltip: {
        trigger: "item"
      },
      grid: { ...gridPosition },
       dataZoom: [
        { type: "slider", xAxisIndex: [0],   },
        { type: "slider", yAxisIndex: [0],   }
      ],
      xAxis: {
        type: "value",
        splitLine: {
          show: false
        },
        axisLine: {}
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false
        },
        axisLine: {}
      },
      series: [...theSeries]
    });
  },
  methods: {
    ajaxData0223() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/3ab25909-696d-44bc-9b30-05798ec155aa";
      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    async getSerieses() {
      let data = await this.ajaxData0223();
      // debugger;
      let gaoshou_juli = {
        type: "scatter",
        data: data
          // .filter(e => e.is_gaoshou)
          .map(e => [e.distance_to_others,e.ranking,e.is_gaoshou]),
        itemStyle: {
          borderWidth: 0,
          borderColor: "white",
          color: (params)=>{
            // debugger
            if(params.data[2]){
              return "rgba(255,0,0,0.1)"
            }else{
              return "rgba(0,0,0,0.1)"
            }
          },
          opacity: 1
        },
        silent: true,
        animation: false
      };
      return [gaoshou_juli];
    }
  }
};
</script>
<style lang="less" scoped>
.thechart {
  width: 1200px;
  height: 1000px;
}
</style>